<template>
  <div class="main">
    <AppHeader :title="headerTitle"/>
    <div class="content container border-radius" style="margin-top: 160px">
      <div class="title-container">
        <h3 class="title">{{headerTitle}}</h3>
        <em class="tips" v-show="showTips">4A</em>
      </div>
      <ul class="info">
        <li class="info-item">
          <img src="https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/fire.webp"
               class="icon">
          <span class="text">探访潮州千年古寨</span>
          <div class="clear"></div>
        </li>
        <li class="info-item">
          <img src="https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/positioning.webp"
               class="icon">
          <span class="text">潮州市潮安区护堤路与龙鹳路交叉口西南角</span>
          <div class="clear"></div>
        </li>
      </ul>
      <ul class="start-list">
        <li class="start-list-item" v-for="(item,index) in 5" :class="[index + 1 <=startNumber ? 'light-up' : '']"></li>
      </ul>
    </div>
    <div class="content container border-radius">
      <div class="title-container">
        <img src="https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/time.webp" alt=""
             class="icon">
        <span class="sub-title">开放时间</span>
        <em class="sub-tips">(建议游玩约2小时)</em>
        <div class="clear"></div>
      </div>
      <ul class="content-list">
        <li class="content-list-item">全天开放</li>
      </ul>
      <p class="ps">以上信息仅供参考，具体以景区当日实际公示信息为准</p>
      <div class="title-container">
        <img src="https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/scenic%20spot.webp"
             alt=""
             class="icon">

        <span class="sub-title">景区介绍</span>
        <div class="clear"></div>
      </div>
      <div class="text-content">
        <p>龙湖古寨始建于南宋年间，距今已有1000多年的历史目前仍保存着上百座古建筑，漫步其中，随处可见千年潮州府的缩影。古寨主要由三街六巷组成，这里的原住民宗族姓氏繁多，且龙虎寨李赛科举出身的进士、举人达60多人，走在厚厚的石板路上，两旁民宅中有着数不清的公祠和甲第，每一户都有着自己的故事。</p>
        <img src="https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/picture04.webp" alt="">
        <p>这些建筑既体现了宋、元、明、清各历史时期的不同建筑风格，又荟萃了木雕、石雕、嵌瓷、彩绘、贝灰塑等典型的潮汕民间工艺精华。</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerTitle: "龙湖古寨",
      showTips: false,
      startNumber: 4,
    }
  },
  components: {
    AppHeader: () => import("@/components/AppHeader.vue"),
  }

}
</script>
<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;

}

.main {
  width: 100%;
  min-height: 400px;
  background-image: url("https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/longhu-background.webp");
  background-color: var(--background-color);
  background-size: 100%;

  .border-radius {
    border-radius: 10px;
  }

  .icon {
    width: 22px;
    height: 22px;
    display: inline;
    float: left;
  }

  background-repeat: no-repeat;

  .content {

    background-color: var(--black-color-0);
    padding: 20px 20px 10px;
    position: relative;
    margin-bottom: 15px;


    .start-list{
      position: absolute;
      display: flex;
      right: 15px;
      top: 15px;
      .start-list-item{
        width: 16px;
        height: 16px;
        background: url("https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/recommend.webp") no-repeat;
        background-size: contain;
        &.light-up{
          background: url("https://wlhp-cultural-tourism.oss-cn-beijing.aliyuncs.com/Index/attractions/icon/recommend-light.webp") no-repeat;
          background-size: contain;
        }
      }
    }

    .title-container {
      padding: 0;
      margin: 0;

      .title {
        margin: 0;
        padding: 0;
        display: inline;
      }

      .tips {
        display: inline;
        font-style: normal;
        padding: 3px 5px;
        margin-left: 10px;
        background-color: #F3F3F7;
        color: #8F7352;
      }

      .sub-title {
        float: left;
        padding-left: 10px;
        font-size: 14pt;
        display: inline-block;
        height: 22px;
        line-height: 22px;
      }

      .sub-tips {
        float: left;
        padding-left: 5px;
        font-size: 10pt;
        height: 22px;
        line-height: 22px;
        font-style: normal;
        color: var(--black-color-20);
      }

    }

    .info {
      .info-item {
        border-bottom: 1px dashed #D2D2D2;
        padding: 10px 0;

        &:first-child {
          .text {
            color: #8F7352;
          }
        }

        &:last-child {
          border: none;
        }

        .text {
          display: inline-block;
          height: 22px;
          line-height: 22px;
          color: var(--black-color-55);
          font-size: 11pt;
          float: left;
          padding-left: 10px;
        }
      }

    }

    .content-list {
      padding: 20px 0 0 0;
      border-bottom: 1px dashed #D2D2D2;

      .content-list-item {
        font-size: 12px;
        padding: 10px 0;
        color: var(--black-color-40);
      }
    }

    .ps {
      line-height: 22px;
      font-size: 12px;
      color: var(--black-color-55);

      &::before {
        content: '*';
        color: var(--danger-color);
      }
    }

    .text-content {
      p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--black-color-40);
      }

      img {
        width: 100%;
      }
    }
  }

}
</style>
